<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>巡查排查</div>
      </div>
    </header>

    <div class="contant" v-if="isShow">
      <div class="list-box">
        <span class="dian dian1">{{items.typeB}}-</span>
        <span class="yhd">{{items.typeA}}</span>
      </div>
      <div class="list-box yinhuanh" v-if="items.yhlb != undefined && items.yhlb !=''">
        <div style="display: flex;align-items: center;margin-right:2rem;" class="list-box-item">
          <img src="../../../assets/images/jsd.gif" v-if="items.status==0" />
          <img src="../../../assets/images/putong/lg.png" v-else
            style="height: 0.4444rem;width: 0.4444rem;margin-top: 0.0926rem;" />&nbsp;
          <span :style="items.yhlb!=''?'color:orange':''">隐患</span>
        </div>
        <div class="list-box-item" style="flex: 1;">
          <span>{{items.jcx}}</span>
        </div>
      </div>
      <div class="list-box" v-if="(items.jcdx != undefined && items.jcdx != '' && items.jcdx != null)"
        style="padding-bottom: 0.3426rem;">
        <img src="../../../assets/images/putong/a3.gif" alt="" class="img_a3"
          v-if="items.jwd != undefined && items.jwd != ''" @click="_ditu(items.jwd,items.jcdx)">

        <span class="dian bg_l" @click="_jcdx(items.zgfid,index)" v-if="items.zgfid != undefined && items.zgfid != ''"
          v-for="(item, index) in items.jcdx.split(',')" :key="index">{{item}}</span>

        <span class="dian" v-else-if="items.jwd != undefined && items.jwd != ''"
          @click="_ditu(items.jwd,items.jcdx)">&nbsp;{{items.jcdx}}</span>

        <span class="dian" v-else>{{items.jcdx}}</span>
      </div>


      <div v-for="(item, index) in items.taskName" :key="index+'a'">
        <div class="list-box">
          <span class="dian dian1">专项任务-</span>
          <span class="yhd">{{item.taskName}}</span>
        </div>
        <div class="list-box" v-for="(item1, index1) in item.child" :key="index1+'b'">
          <span class="dian dian1">具体任务{{index1 + 1}}-</span>
          <span class="yhd">{{ item1.concretenessName }}</span>
        </div>
      </div>

      <div class="list-box" v-if="qi_name !== ''">
        <span class="dian dian1">参加领导-</span>
        <span class="yhd">{{ qi_name }}</span>
      </div>
      <div class="list-box" v-if="jie_name !== ''">
        <span class="dian dian1">街道部门-</span>
        <span class="yhd">{{ jie_name }}</span>
      </div>
      <div class="list-box" v-if="she_name !== ''">
        <span class="dian dian1">社区-</span>
        <span class="yhd">{{ she_name }}</span>
      </div>




      <div class="list-box " v-if="items.title != '' && items.title != null">
        <div class="dian list1" :class="listHeight > 30 ? 'list1-sapn' : ''"> {{items.title}}</div>
      </div>

      <div class="yh-box">
        <div class="bg-clr">
          <div class="list" v-if='items.contract != undefined && items.contract != "" '>
            <div class="yy" @click="y_play(items.contract,$event)">
              <img src="../../../assets/images/play.png" class="img_yuyin" />
              <span class="ly_s">{{items.contractime}}</span>
            </div>
          </div>

          <div class="lists ">
            <ul class="lists imgs_ul"
              v-if="items.imgurl != undefined && items.imgurl !== '' && items.imgurl !== null  && items.imgurl.indexOf('^') ==-1">
              <li class="img-box" v-for="(item, indexs) in items.imgurl.split(',')" :key="indexs" v-if="item != ''">
                <div class="img-box-item">
                  <img :src="name+item" alt="" class="imgs">
                </div>
                <div class="img-box-text">{{items.imgText.split(',')[indexs]}}</div>
              </li>
            </ul>
            <ul class="lists imgs_ul"
              v-else-if="items.imgurl != undefined && items.imgurl !== '' && items.imgurl !== null">
              <li class="img-box" v-for="(item, indexs) in items.imgurl.split('|')" :key="indexs">
                <div class="img-box-item">
                  <img :src="name + item.substring(0, item.indexOf('^'))" alt="" class="imgs">
                </div>
                <div class="img-box-text">{{ item.substring(item.indexOf('^') + 1, item.length - 2)}}</div>
              </li>
            </ul>

            <ul class="video-box" v-if="items.videourl != undefined">
              <li class="video-list" v-for="(obj,i) of items.videourl.split(',')" :key="i"
                v-if="items.videourl !== '' && items.videourl !== null">
                <video controls>
                  <source :src="name + obj" type="video/mp4">
                  <source :src="name + obj" type="video/ogg">
                  您的浏览器不支持Video标签。
                </video>
              </li>
            </ul>
          </div>
        </div>
        <div class="w-del-set" v-if="items.isRightC==1">
          <div></div>
          <div class="imggg">
             <img src="../../../assets/images/putong/w_del.png"  v-if="items.isRightC==1" @click="operationShow = true"/>
            <img src="../../../assets/images/putong/w_set.png" v-if="items.isRightC==1" @click="edit()" />
          </div>
        </div>
      </div>
      <div class="list bg-clr">
        <div class="dians-name">{{items.dwname}}</div>
        <div class="dians">
          <div class="dians-sq">{{items.username}}</div>
          <div class="dians-box" style="margin-right: 15px">
            <img src="../../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
            <span>{{items.persons}}</span>
          </div>
        </div>
        <div class="list_two">{{timestampToTime(items.addtime)}}</div>
      </div>

      <!-- list -->
      <div class="" v-for="(item, index) in items.list" :key="index">

        <div class="list-box" v-if="items.title != '' && items.title != null">
          <img src="../../../assets/images/putong/wb.png" v-if="item.status==0" class="img-b" />
          <img src="../../../assets/images/putong/sx.png" v-else class="img-b" />
          <span class="dian">{{item.title}}</span>
        </div>

        <div class="yh-box">
          <div class="bg-clr">
            <div class="list" v-if='item.contract != undefined && item.contract != "" '>
              <div class="yy" @click="y_play(item.contract,$event)">
                <img src="../../../assets/images/play.png" class="img_yuyin" />
                <span class="ly_s">{{item.contractime}}</span>
              </div>
            </div>

            <div class="lists ">
              <ul class="lists imgs_ul"
                v-if="item.imgurl !== '' && item.imgurl !== null && items.imgurl.indexOf('^') ==-1">
                <li class="img-box" v-for="(item1, indexs) in item.imgurl.split(',')" :key="indexs" v-if="item1 != ''">
                  <div class="img-box-item">
                    <img :src="name+item1" alt="" class="imgs">
                  </div>
                </li>
              </ul>
              <ul class="lists imgs_ul"
                v-else-if="item.imgurl != undefined && item.imgurl !== '' && item.imgurl !== null">
                <li class="img-box" v-for="(item1, indexs) in item.imgurl.split('|')" :key="indexs">
                  <div class="img-box-item">
                    <img :src="name + item1.substring(0, item1.indexOf('^'))" alt="" class="imgs">
                  </div>
                  <div class="img-box-text">{{ item1.substring(item1.indexOf('^') + 1, item1.length - 2)}}</div>
                </li>
              </ul>



              <ul class="video-box" v-if="item.videourl != undefined">
                <li class="video-list" v-for="(obj,i) of item.videourl.split(',')" :key="i"
                  v-if="item.videourl !== '' && item.videourl !== null">
                  <video controls>
                    <source :src="name + obj" type="video/mp4">
                    <source :src="name + obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="list bg-clr">
          <div class="dians-name">{{item.dwname}}</div>
          <div class="dians">
            <div class="dians-sq">{{item.username}}</div>
            <div class="dians-box" style="margin-right: 0.2778rem">
              <img src="../../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
              <span>{{item.persons}}</span>
            </div>
          </div>
          <div class="list_two">{{timestampToTime(item.addtime)}}</div>
        </div>

      </div>


      <div class="bottomss">
        <div class="chuli" @click="tochuli(1)" v-if="items.isRightA == 1">
          <img src="../../../assets/images/putong/wb.png" />
          <div>跟踪巡查</div>
        </div>
        <div class="chuli" @click="tochuli(2)" v-if="items.isRightb == 1">
          <img src="../../../assets/images/putong/sx.png" />
          <div>闭环处理</div>
        </div>
      </div>
        <div class="titles-modal" v-if="operationShow">
        <div class="titles-box">
<!--          <div class="" style="width: 100%;">-->
            <p style="font-size: 0.5rem">确认删除吗？</p>
            <p class="titles-text">删除不可逆</p>
            <div class="titles-box-text">
              <p @click="operationShow = false">取消</p>
              <p @click="queding">确定</p>
            </div>
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import "../../../assets/js/zoom";
  import terminal from '../../../assets/js/terminal';
  export default {
    name: "hard_detail",
    data() {
      return {
        userId: null,
        terminal: "",
        name: "",
        jsd: "hg",
        query: null,
        items: null,
        isShow: false,
        play_code: 1,
        p: null,
        listHeight: null,
        qi_name: "",
        jie_name: "",
        she_name: "",
        zx_renwu: "",
        jt_renwu: "",
         operationShow: false
      };
    },
    methods: {
      edit() {
        localStorage.removeItem('communityData');
        localStorage.removeItem('MapPosResult');
        localStorage.removeItem('MapPosObj');
        localStorage.removeItem('ordinary_inspection');
        localStorage.removeItem('responseText');
        this.$router.push({
          path: '/ordinary_inspection',
          query: { id: this.query.id }
        })
      },
      queding(){

        var thsr=sessionStorage.getItem("inspection_patrolTroubleshootId")
 this.axios.post(`${this.$global_msg.Url.host}/partroInspection/deletePatrolById?patrolTroubleshootId=${thsr}&noweInfoId=${ this.query.id}`,
          ).then(res => {
console.log(res)
if(res.data.code==200){
  this.operationShow=false;
   sessionStorage.setItem("xcpxleibie",2);
   this.$router.push("/statistical_lists");
}
          })
      },
      tochuli(dd) {
        if (dd == 1) {//跟踪查询
          this.$router.push({
            // path: '/hard_detail_ordinary',
            path: '/genzongxc',
            query: this.query,
          });
        } else if (dd == 2) {//闭环处理
          // this.$router.push("/chulipage");
          this.$router.push({
            // path: '/hard_detail_ordinary',
            path: '/chulipage',
            query: this.query,
          });
        }
      },
      _jcdx(str, index) {//跳转住改非
        let list = str.split(",")
        console.log(list[index])
        var xqda_params = {
          xq_id: list[index],//详情id
          from: '/ptlook'//详情返回路径
        };
        localStorage.setItem("xqda_params", JSON.stringify(xqda_params));
        this.$router.push("/zgf_see");
      },
      _ditu(str, name) {//查看地图
        //使用方法
        localStorage.setItem("ShowMapPosObj", JSON.stringify({
          jwd: str,
          address: name
        }));
        this.$router.push("/ShowMapPos");
      },
      stopPlay() {
        if (this.p) {
          this.p.stop();
        }
        this.play_code = 1;
        $('.img_yuyin').attr("src", require('../../../assets/images/play.png'));
        this.$forceUpdate();
      },
      back() {
        this.stopPlay();
        this.$router.back();
      },
      y_play(yy_path, e) {
        var _this = this;
        var dom = $(e.currentTarget).find(".img_yuyin")
        if (_this.play_code == 1) {
          _this.p = null;
          console.log(_this.$global_msg.Url.host + yy_path);
          _this.p = plus.audio.createPlayer(_this.$global_msg.Url.hosts + yy_path);
          $(dom).attr("src", require('../../../assets/images/play_dt.gif'))
          console.log("进入播放");
          _this.play_code = 2;
          // localStorage.setItem('domPlay', JSON.stringify(dom));
          // localStorage.setItem('domPlayString', yy_path);
          console.log(JSON.stringify(_this.p))
          _this.p.play(() => {
            //播放完毕
            _this.play_code = 1;
            $(dom).attr("src", require('../../../assets/images/play.png'));
            _this.p.close();
          },
            function (e) {
              _this.play_code = 1;
              $(dom).attr("src", require('../../../assets/images/play.png'));
              _this.p.close();
              alert("Audio play error: " + e.message);
            });
        } else {
          _this.play_code = 1;
          $(dom).attr("src", require('../../../assets/images/play.png'));
          _this.p.close();
        }
      },
      info() {//获取数据
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        this.axios
          .get(`${this.$global_msg.Url.host}` + "/partroInspection/generyDec?userId=" + this.userId + "&noweInfoId=" + this.query.id
          )
          .then(res => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("数据：", res);
            if (res.data.code == 200) {// 1 有 0 无
              this.items = res.data.rows
              this.isShow = true
              //人
              res.data.rows.person.forEach(item => {
                if (item.level === 0) {
                  if (item.lev === 1 || item.lev === 2 || item.lev === 3 || item.lev === 4) {
                    this.qi_name += "、" + item.name
                  }
                } else if (item.level === 1) {
                  if (item.lev === 1 || item.lev === 2 || item.lev === 3 || item.lev === 4) {
                    this.jie_name += "、" + item.name
                  }
                } else if (item.level === 2) {
                  this.she_name += "、" + item.name
                }
              });
              this.qi_name = this.qi_name.substring(1)
              this.jie_name = this.jie_name.substring(1)
              this.she_name = this.she_name.substring(1)
            } else {
              this.$toast(res.data.msg);
            }
          })
          .catch(error => {
            this.$terminal._error(error)
          });

      },
      timestampToTime(timestamp) {
        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
        var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + ':';
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      },


    },
    watch: {
      items(newData, oldData) {
        this.$nextTick(() => {
          let a = document.getElementsByClassName('list1')[0]
          if (a !== undefined) {
            this.listHeight = a.offsetHeight;
            console.log(this.listHeight)
          }
        })
      }
    },
    mounted() {
      var _this = this;
      document.body.style.backgroundColor = "#fff";
      this.name = this.$global_msg.Url.hosts + '';
      this.terminal = terminal.terminals().android;
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
    },
    created() {
      this.userId = localStorage.getItem("userId") //获取访问id
      this.query = this.$route.query;
      console.log(this.query)
      this.info()
      console.log(this.$global_msg.Url.host)

    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
      this.stopPlay();
    }
  };
</script>
<style scoped>
  /* .dian {
    word-break: keep-all;
  } */
  .img_a3 {
    width: 0.7963rem;
    height: 0.7963rem;
    margin-top: -0.1852rem;
  }

  .bg_l {
    background: #85BEF1;
    display: inline-block;
    margin-right: 0.0926rem;
  }

  .yinhuanh img {
    width: 0.592592rem;
    height: 0.592592rem;
  }

  .list-box {
    display: flex;
    align-items: flex-start;
    border-bottom: 1Px solid #f2f2f2;
    padding: 0.4352rem 0.4rem;
    white-space: normal;
    flex-wrap: wrap;
  }

  .w-del-set {
    display: flex;
    align-items: center;
    border-bottom: 1Px solid #f2f2f2;
    padding: 0.4352rem 0.4rem;
    justify-content: space-between;
  }

  .w-del-set img {
    width: 0.37037rem;
    height: 0.37037rem;
  }

  .w-del-set .imggg {
    display: flex;
    align-items: center;
  }

  .w-del-set .imggg img:nth-child(2) {
    margin-left: 0.8rem;
  }

  .chuli {
    display: flex;
    align-items: center;
    width: 43%;
    padding: 0.2rem 0;
    background: #007aff;
    color: white;
    border-radius: 0.1rem;
    justify-content: center;
  }

  .chuli img,
  .img-b {
    width: 0.462962rem;
    height: 0.462962rem;
    margin-right: 0.1rem;
  }

  .img-b {
    margin-top: 0.0556rem;
  }

  .bottomss {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.3704rem;
  }

  /*  .yh-box {
    background-color: #f2f2f2
  } */

  .bg-clr {
    background-color: #ffffff;
    /* border-bottom: 1Px #f2f2f2 solid; */
  }

  .dian-imgs {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .imgtext {
    word-break: break-word;
  }

  .img-box-item {
    width: 4.381481rem;
    height: 2.814814rem;
    border-bottom: 1Px #f2f2f2 solid;
    border-radius: 0.277778rem;
  }

  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
  }

  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1Px #f2f2f2 solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .dians {
    display: flex;
    justify-content: space-between;
    /*margin-right: ;*/
  }

  .dians-sq {
    margin-right: 20px;
  }

  .dians-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909090;
  }

  .imgs_ul {
    padding: 0 0.4rem;
    width: 100%;
    padding-bottom: 0.2rem;
  }

  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1Px solid #f2f2f2;
  }

  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1Px solid #f2f2f2;
  }

  .lists1:first-child {
    border-bottom: none;
  }

  .img-box {
    width: 4.381481rem;
    /* height: 2.814814rem; */
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    border-radius: 30px;
    margin-top: 0.2rem;
    flex-wrap: wrap;
  }

  .imgs {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .yy img {
    margin-left: 0.4rem;
    margin-right: 0.3rem;
    width: 0.4rem;
  }

  .yy {
    width: 2.8rem;
    height: 0.8rem;
    border: 1Px solid #f2f2f2;
    display: flex;
    border-radius: 0.2rem;
    align-items: center;
  }

  .list_two {
    color: #909090;
  }

  .operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #f2f2f2;
    /* height: 1.3rem; */
    padding: 0.4352rem 0.4rem;
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #f2f2f2;
    font-size: 0.3889rem;
    /* height: 1.3rem; */
    padding: 0.4352rem 0.4rem;
  }

  .contant {
    margin-top: 1.8519rem;
    /* border: 1Px solid white; */
  }

  .dians-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 27%;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .list-box-item>span {
    margin-top: 0.0926rem;
    display: inline-block;
  }

  .list1-sapn {
    text-indent: 2em
  }

  .dian {

    margin-bottom: 0.0926rem;
  }

  .dian1 {
    word-break: keep-all;
  }
   .titles-box {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    width: 75%;
    transform: translate3d(-50%, -50%, 0);
    flex-direction: column;
    padding: 0.740741rem;
    background-color: #ffffff;
  }
  .titles-box-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    color: #007aff;
  }
  .titles-text {
    padding: 0.3rem 0 1rem;
  }
  .titles-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    z-index: 999;
  }
</style>
